<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { post } from '@/utils/request'
import { loginApi } from '@/api'

import {
  getLoginName,
  getLoginPhone,
  setLoginName,
  setUserInfo
} from '@/utils/storage.ts'

const router = useRouter()
const loginFormRef: any = ref(null)
const isLoading: any = ref(false)
const loginForm: any = reactive({
  userAccount: '',
  password: '',
  remember: false
})

const loginRules = {
  userAccount: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ]
}

const handleLogin = async () => {
  try {
    // 表单验证
    await loginFormRef.value.validate()
    isLoading.value = true

    // // 调用登录API
    const res: any = await post(loginApi.login, loginForm)
    if (res.code === '0000') {
      // 存储用户信息
      setUserInfo(res.data)
      // 如果勾选记住密码，存储登录状态
      if (loginForm.remember) {
        setLoginName(loginForm.userAccount)
      }

      router.push('/index')
      ElMessage.success('登录成功')
    }
  } catch (error) {
    isLoading.value = false
  }
}

// 页面加载时，如果有记住的用户信息，自动填充
const initForm = () => {
  const loginName = getLoginName()
  const loginPhone = getLoginPhone()
  if (loginName && loginPhone) {
    loginForm.userAccount = loginName
    loginForm.password = loginPhone
    loginForm.remember = true
  }
}

// 初始化表单
initForm()
</script>

<template>
  <div class="log-bg">
    <div class="log-content blurred-bg">
      <div class="title-line"></div>
      <div class="log-text"></div>
      <div class="log-form">
        <!-- 登录表单 -->
        <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="space-y-6">
          <!-- 用户名输入 -->
          <el-form-item prop="userAccount">
            <el-input clearable v-model="loginForm.userAccount" placeholder="请输入用户名">
              <template #prefix>
                <img src="@/assets/img/log-img/user-img.png" class="custom-icon" />
              </template>
            </el-input>
          </el-form-item>

          <!-- 密码输入 -->
          <el-form-item prop="password">
            <el-input clearable v-model="loginForm.password" type="password" placeholder="请输入密码" show-password>
              <template #prefix>
                <img src="@/assets/img/log-img/password-img.png" class="custom-icon" />
              </template>
            </el-input>
          </el-form-item>

          <!-- 记住密码和忘记密码 -->
          <div class="check-password flex items-center justify-between pl-[16px] ">
            <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
          </div>

          <!-- 登录按钮 -->
          <div class="log-btn w-[410px] h-[74px] mb-[30px] flex items-center justify-center" @click.stop="handleLogin">
          </div>
          <div class="w-full flex justify-center text-[#FFFFFF] text-[14px]">
            <span>版本号：V0.0.01</span>
          </div>
        </el-form>
      </div>
    </div>

  </div>

</template>


<style scoped lang="scss">
.text-center {}

.log-bg {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/img/log-img/background-img.png');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .log-content {
    width: 540px;
    height: 612px;
    background: url('@/assets/img/log-img/blur-img.png');
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 21px;

    .blurred-bg {}

    .title-line {
      width: 372px;
      height: 19px;
      background: url('@/assets/img/log-img/title-line.png');
      background-size: cover;
      margin-bottom: 43px;
    }

    .log-text {
      width: 215px;
      height: 46px;
      background: url('@/assets/img/log-img/log-text.png');
      background-size: cover;
      margin-bottom: 48px;
    }

    .log-form {
      :deep(.el-input) {
        width: 410px;
        height: 64px;

      }

      .el-form-item {
        margin-bottom: 40px;
      }

      .check-password {
        margin-bottom: 43px;

        :deep(.el-checkbox__label) {
          color: #fff;
        }
      }

      .log-btn {
        background: url('@/assets/img/log-img/log-btn.png');
        background-size: cover;
        cursor: pointer;
      }

      .custom-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        color: #fff;
        background-size: cover;
        cursor: pointer;

      }
    }
  }
}

//第一种解决方法
.el-input {
  :deep(.el-input__wrapper) {
    border: none !important;
    box-shadow: none !important;
    border-radius: 16px 16px 16px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: none !important;
  }

  :deep(.el-input__inner) {
    box-shadow: none !important;
    color: #fff;
    font-size: 18px;
    background-color: transparent !important;
  }

  :deep(.el-checkbox__inner) {
    background-color: transparent;
  }
}

// 解决el-input 回填账号时 背景无法更改问题
:deep(input:-internal-autofill-previewed,
  input:-internal-autofill-selected) {
  // -webkit-text-fill-color: #807c7c;
  transition: background-color 5000s ease-out 0.5s;
}

:deep(input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active) {
  transition-delay: 99999s;
  transition: color 99999s ease-out, background-color 99999s ease-out;
  -webkit-transition-delay: 99999s;
  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
  // -webkit-text-fill-color: #807c7c;
}
</style>